<template>
	<view class="follow-view">
		<van-tabs
			:active="state.active"
			title-active-color="#3e9df8"
			line-width="80px"
			color="#3e9df8"
			title-inactive-color="#7d7e80"
			swipeable
			:ellipsis="false"
			:lock-scroll="true"
		>
			<van-tab title="作品" name="作品">
				<view class="content">
					<view
						class="item"
						v-for="(item, index) in articleList"
						:key="index"
					>
						<view @click="goArticleDetails(item.uid)" class="title">
							<text>{{ item.tatle }}</text>
						</view>
						<view
							@click="goArticleDetails(item.uid)"
							class="image"
							v-if="item.wztp"
						>
							<image
								v-for="(image, i) in item.wztp"
								:key="i"
								:src="image"
								mode=""
							></image>
						</view>
						<view
							@click="goArticleDetails(item.uid)"
							class="operate"
						>
							<view class="left">
								<text>{{ item.name }}</text>
								<text class="active"> {{ item.pl }} 评论</text>
								<text class="active"> {{ dayjs(item.time).format('YYYY-MM-DD') }}</text>
							</view>
						</view>
						<view class="item-bottom">
							<view class="item">
								<van-icon name="comment-o" />
								<text>{{ item.pl }}</text>
							</view>
							<view class="item">
								<van-icon name="like-o" />
								<text>{{ item.sq }}</text>
							</view>
							<view @click="openType(item.uid, item.wztp)" class="item">
								<van-icon name="other-pay" />
								<text>编辑</text></view
							>
						</view>
						<view class="split"></view>
					</view>
					<view class="finished-text">没有更多了</view>
				</view>
			</van-tab>
			<van-tab title="公告" name="公告">
				<view class="content">
					<view class="announce">
						<text>欢迎来到黑马头条社区</text>
						<text>2018-10-24T10:24:00</text>
					</view>
					<view class="finished-text">没有更多了</view>
				</view>
			</van-tab>
			<van-tab title="数据" name="数据">
				<view class="content">
					<view class="figure">
						<view class="left">
							<text>粉丝数</text> <text>{{ info.fans }}</text>
						</view>
						<view class="right">
							<text>评论数</text> <text>{{ info.pl }}</text>
						</view>
					</view>
				</view>
			</van-tab>
		</van-tabs>

		<van-popup
			position="bottom"
			custom-style="height: 20%;"
			closeable
			:show="isShow"
			@close="closeShow"
		>
			<view class="box">
				<view @click="uploadArticle" class="upload">修改</view>
				<view @click="delArticle()" class="upload">删除</view>
			</view>
		</van-popup>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs, ref } from 'vue'
import { articleApi, userDataApi, delrticleApi } from '@/api/modules/article.js'
import { UserStore } from '../../store/user.js'
import dayjs from 'dayjs'
const removeId = ref()
const category = ref([])

const userStore = UserStore()
const state = reactive({
	active: '作品',
	articleList: [],
	info: {},
	isShow: false
})
const openType = (id, cate) => {
	state.isShow = true
	removeId.value = id
	category.value = cate
}
const closeShow = () => {
	state.isShow = false
	removeId.value = ''
	category.value = ''
}
const getrticle = async () => {
	const { data } = await articleApi()
	state.articleList = data.data
}
const getUserData = async () => {
	const { data } = await userDataApi()
	state.info = data
}

const delArticle = () => {
	uni.showModal({
				title: '提示',
				content: '你确定要删除?',
				cancelText: '容我想想',
				confirmText: '狠心删除',
				success: async ({ confirm }) => {
					if (confirm) {
						await delrticleApi({ uid: removeId.value })
						state.isShow = false
						uni.$Toast('操作成功')
						getrticle()
					}
				}
			})
}

const uploadArticle = () => {
	if (category.value.length) {
		uni.navigateTo({
			url: `/subpkg/upload-picture/upload-picture?uid=${removeId.value}`
		})
	}else {
		uni.navigateTo({
			url: `/subpkg/upload-posts/upload-posts?uid=${removeId.value}`
		})
	}
}
const goArticleDetails = uid => {
	const id = userStore.info.id
	uni.navigateTo({
		url: `/subpkg/details-article/details-article?uid=${uid}&id=${id}`
	})
}
// 页面加载
onLoad(message => {
	state.active = message.active
	getrticle()
	getUserData()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { articleList, info, isShow } = toRefs(state)
</script>

<style lang="scss">
.box {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	margin-top: 40rpx;
	view {
		width: 100%;
		height: 80rpx;
	}
}
.follow-view {
	.content {
		background-color: #f5f7f9;
		min-height: calc(100vh - 88rpx);
		padding: 20rpx 0;
		.item {
			background-color: #fff;
			.title {
				display: flex;
				align-items: baseline;
				justify-content: space-between;
				text {
					font-size: 32rpx;
					font-weight: 500;
					color: #3a3a3a;
					letter-spacing: 1px;
					font-stretch: normal;
					padding: 16rpx 24rpx;
					flex-basis: 70%;
					text-align: left;
				}
			}
			.image {
				display: flex;
				justify-content: space-between;
				padding: 0 20rpx;
				image {
					width: 33.33%;
					height: 146rpx;
					border-radius: 2px;
				}
			}
			.operate {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 16rpx 24rpx;
				border-bottom: 1rpx solid #edeff3;
				color: #cfcfcf;
				box-sizing: border-box;
				.left {
					color: #999;
					font-size: 24rpx;
					.active {
						margin-left: 20rpx;
					}
				}
			}
			.item-bottom {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				background-color: #fff;
				color: #333;
				font-size: 28rpx;
				.item {
					cursor: pointer;
					width: 33.33%;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					border-right: 1rpx solid #ececec;
					.van-icon {
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 36rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.split {
			height: 20rpx;
			background-color: #f5f7f9;
		}

		&:last-child {
			padding: 0;
			border-top: 1rpx solid #ccc;
		}
		.finished-text {
			color: #969799;
			font-size: 26rpx;
			line-height: 100rpx;
			text-align: center;
		}
		.announce {
			display: flex;
			height: 120rpx;
			flex-direction: column;
			justify-content: space-between;
			background-color: #fff;
			margin-top: 20rpx;
			padding: 40rpx 20rpx;
			text-align: left;
		}
		.figure {
			display: flex;
			justify-content: space-around;
			background: #fff;
			.left {
				height: 140rpx;
				border-right: 2rpx solid #ccc;
				display: flex;
				margin: 40rpx 20rpx;
				flex-direction: column;
				justify-content: space-around;
				flex: 6;
				align-items: center;
				text:last-child {
					color: #3a3a3a;
					font-size: 80rpx;
				}
			}
			.right {
				align-items: center;
				height: 140rpx;
				flex: 6;
				display: flex;
				margin: 40rpx 20rpx;
				flex-direction: column;
				justify-content: space-around;
				text:last-child {
					color: #3a3a3a;
					font-size: 80rpx;
				}
			}
		}
	}
}
</style>
